<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>打印效果 测试</title>
</head>
<style>
    body {
        background: #000;
    }

    #demo {
        font-family: helvetica;
        text-transform: uppercase;
        text-align: center;
        color: #fefefe;
        font-size: 50px;
        text-shadow: #e7e7e7 3px 5px 0, #999 4px 6px 3px, #ccc 8px 11px 10px;
    }
</style>

<body>
    <div id="demo">

    </div>
    <script>
        var str = "for example,再有几天都该七夕节了，你为她准备了什么礼物？";
        var i = 0;
        var cal = '';
        function demoStr() {
            if (i < str.length) {
                cal = str.substring(0, i++) + "_";
                document.getElementById("demo").innerHTML = cal;
                setTimeout(demoStr, 500);
            } else {
                document.getElementById("demo").innerHTML = str;　　//相当于清除下划线以及计时器效果
            }
        }
        demoStr();
    </script>
</body>

</html>